<%--
  Created by IntelliJ IDEA.
  User: H2
  Date: 2016/1/15
  Time: 16:36
  一切从今天开始还来得及！
--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <%-- IF IE --%>
  <jsp:include page="${pageContext.request.contextPath}/jsp/home/common/if_ie.jsp"></jsp:include>

  <!-- charset -->
  <meta charset="utf-8">

  <!-- title -->
  <title>组合详情</title>

  <!-- Mobile Meta -->
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1,minimum-scale=1, user-scalable=no">

  <!-- Favicon -->
  <link rel="shortcut icon" href="${pageContext.request.contextPath}/resources/app/images/img/logo/favicon.ico">

  <!-- Bootstrap core CSS -->
  <link href="${pageContext.request.contextPath}/resources/libs/css/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- BootStrap-Slider core CSS -->
  <link href="${pageContext.request.contextPath}/resources/libs/css/bootstrap-slider/bootstrap-slider.css"
        rel="stylesheet">

  <!-- JuCaiBang core CSS file -->
  <link href="${pageContext.request.contextPath}/resources/app/css/home/hh.css" rel="stylesheet">

  <!-- JuCaiBang core CSS file -->
  <link href="${pageContext.request.contextPath}/resources/app/css/home/jcb.css" rel="stylesheet">
</head>
<body>

<%-- navbar --%>
<jsp:include page="${pageContext.request.contextPath}/jsp/home/common/nav_nonsearch.jsp"></jsp:include>

<%-- maincontent --%>
<div class="comboDetail" data-comboId="${param.comboId}">
  <div class="comboDetail-bg-1">
    <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">

       <%-- comboDetail-info --%>
       <div class="comboDetail-info" id="comboDetail-info"></div>

       <%-- comboDetail-property --%>
       <div class="comboDetail-property" id="comboDetail-property"></div>

       <%-- comboDetail-exhibition --%>
       <table class="comboDetail-exhibition" id="comboDetail-exhibition"></table>

       <%-- comboDetail-infoDesc --%>
       <div class="comboDetail-infoDesc" id="comboDetail-infoDesc"></div>

    </div>
  </div>
  <div class="comboDetail-bg-2">
    <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3" style="margin-bottom: 30px;">
        <div class="comboDetail-pieChart">
           <div class="comboDetail-pieChart-title">资产配置图</div>
           <div class="comboDetail-pieChart-content" id="comboDetail-pieChart-content"></div>
           <div class="comboDetail-pieChartTable" id="comboDetail-pieChartTable"></div>
        </div>
    </div>
  </div>
  <div class="comboDetail-bg-3">
      <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
          <div class="comboProperty">
              <div class="comboPropertyTitle">组合特性图</div>
              <div class="comboPropertyDiag" id="comboPropertyDiag"></div>
          </div>
          <div class="comboNetWorth">
              <div class="comboNetWorthTitle">组合净值图</div>
              <div class="comboNetWorthDiag" id="comboNetWorthDiag"></div>
          </div>
          <div class="flowAccumulate">
              <div class="flowAccumulateTitle">流动性堆积图</div>
              <div class="flowAccumulateDiag" id="flowAccumulateDiag"></div>
          </div>
      </div>
  </div>
  <div class="comboDetail-bg-4">
      <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
          <div class="comboDetail-evaluate">
              <div class="comboDetail-evaluate-title">评价详情</div>
              <div class="comboDetail-evaluate-content" id="comboDetail-evaluate-content"></div>
              <jsp:include page="${pageContext.request.contextPath}/jsp/home/common/evaluate.jsp"></jsp:include>
          </div>

      </div>
  </div>
</div>

<%-- footer --%>
<jsp:include page="${pageContext.request.contextPath}/jsp/home/common/footer.jsp"></jsp:include>


<!-- 客服 -->
<jsp:include page="${pageContext.request.contextPath}/jsp/home/common/customerSupport.jsp"></jsp:include>

<!-- JavaScript files placed at the end of the document so the pages load faster
		==================================================================================== -->
<!-- Jquery and Bootstrap core js files -->

<script type="text/javascript" src="${pageContext.request.contextPath}/resources/libs/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/libs/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/libs/js/jsrender.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/libs/js/range.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/libs/js/Highcharts.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/app/js/home/bootstrap-slider.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/app/js/config.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/app/js/home/common.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/app/js/home/comboDetail.js"></script>

<!-- comboDetail-info 模版 -->
<script id="comboDetail-info-temp" type="text/x-jsrender">
     <p class="comboDetail-info-title">
       {{if data.comboComboValuesAssetPackInstance.comboState == 0}}
         <span class="comboDetail-info-status pre-sale">预约</span>
       {{else data.comboComboValuesAssetPackInstance.comboState == 1}}
         <span class="comboDetail-info-status on-sale">在售</span>
       {{else data.comboComboValuesAssetPackInstance.comboState == 2}}
         <span class="comboDetail-info-status sold-out">售罄</span>
       {{/if}}
       {{:data.comboComboValuesAssetPackInstance.comboName}}
     </p>
     <div class="comboDetail-info-bottom">

        <div class="comboDetail-info-interest">
          <div class="comboDetail-info-expectYearRate">{{: ~comboBRFormat(data.comboValuesBenefitRate)}}<span>%</span><p>预期收益率</p></div>
          <div class="comboDetail-info-term">{{:data.comboComboValuesAssetPackInstance.comboInvestSpan}}<span>月</span><p>投资期限</p></div>
          <div class="comboDetail-info-risk">
            <img src="${pageContext.request.contextPath}/resources/app/images/img/productList/risk-level-circle.png" class="comboDetail-info-riskLevel">
            <img style="transform: rotate({{:data.comboComboValuesAssetPackInstance.comboRank/5*180-90}}deg);" src="${pageContext.request.contextPath}/resources/app/images/img/productList/risk-pointer.png" class="comboDetail-info-riskPointer">
            <p style="margin-left: 47px;">风险</p>
          </div>
        </div>
        <div class="comboDetail-info-collect">
            <input type="button" class="btn btn-jcb-red btn-collect" value="收藏">
        </div>

     </div>
</script>

<!-- comboDetail-property 模板 -->
<script id="comboDetail-property-temp" type="text/x-jsrender">
<ul>
    <li>
        <div class="comboDetail-property-left">适合人群</div>
        <div class="comboDetail-property-right">{{:data.comboComboValuesAssetPackInstance.comboTargetPerson}}</div>
    </li>
    <li>
        <div class="comboDetail-property-left">投资目的</div>
        <div class="comboDetail-property-right">{{:data.comboComboValuesAssetPackInstance.comboPurpose}}</div>
    </li>
    <li>
        <div class="comboDetail-property-left">适合特点</div>
        <div class="comboDetail-property-right">{{:data.comboComboValuesAssetPackInstance.comboFeatureDes}}</div>
    </li>
</ul>
</script>

<!-- comboDetail-exhibition 模板 -->
<script id="comboDetail-exhibition-temp" type="text/x-jsrender">
 <tbody>
    <tr>
      <td style="border-left:2px solid #AAB5BE">预期收益率</td>
      <td>{{: ~comboBRFormat(data.comboValuesBenefitRate)}}%</td>
      <td>标准差</td>
      <td>{{: ~comboBRFormat(data.comboValuesDeviation)}}%</td>
      <td>夏普比率</td>
      <td>{{:data.comboValuesSpRate}}</td>
    </tr>
 </tbody>
</script>

<!-- comboDetail-infoDesc 模板 -->
<script id="comboDetail-infoDesc-temp" type="text/x-jsrender">
    <div class="comboDetail-infoDesc-title">组合简介</div>
    <div class="comboDetail-infoDesc-content">{{:data.comboValuesMessage}}</div>
</script>

<!-- comboDetail-pieChartTable 模板 -->
<script id="comboDetail-pieChartTable-temp" type="text/x-jsrender">
    <div class="comboDetail-pieChart-contentAll">{{:totalAmount}}</div>
    <div class="comboDetail-pieChartTableTitle">
      <span class="proportion">类别/产品</span>
      <span>总占比</span>
      <span>投资总额</span>
    </div>

    <div class="comboDetail-pieChartTableContent">

      {{if !money}}
      {{else}}
        <div class="comboDetail-pieChartTableContent1">
          <div class="pieChartSlideContent" style="cursor:default"  >
             <span class="proportion">现金</span>
             <span>{{:(money.itemPercent).toFixed(2)}}%</span>
             <span>{{:money.itemAmount/10000}}万</span>
          </div>
        </div>
      {{/if}}

      {{if trusts.data && trusts.data.length}}
      <div class="comboDetail-pieChartTableContent1">
         <div class="pieChartSlideContent">
             <span class="proportion"><i class="glyphicon glyphicon-play iconIndicate" style="margin-right: 5px"></i>信托</span>
             <span>{{: (trusts.percent).toFixed(2)}}%</span>
             <span>{{: trusts.totalAmout/10000}}万</span>
         </div>
        {{for trusts.data}}
        <div class="indicate">
           <p>
               <span class="textIndicate proportion">{{:product_name}}</span>
               <span>{{:(itemPercent).toFixed(2)}}%</span>
               <span>{{:itemAmount/10000}}万</span>
           </p>
        </div>
        {{/for}}
      </div>
      {{/if}}

      {{if h_found.data && h_found.data.length}}
      <div class="comboDetail-pieChartTableContent1">
         <div class="pieChartSlideContent">
             <span class="proportion"><i class="glyphicon glyphicon-play iconIndicate" style="margin-right: 5px"></i>货币</span>
             <span>{{: (h_found.percent).toFixed(2)}}%</span>
             <span>{{: h_found.totalAmout/10000}}万</span>
         </div>
         {{for h_found.data}}
            <div class="indicate">
              <p>
                  <span class="textIndicate proportion">{{:product_name}}</span>
                  <span>{{:(itemPercent).toFixed(2)}}%</span>
                  <span>{{:itemAmount/10000}}万</span>
              </p>
            </div>
         {{/for}}
      </div>
      {{/if}}

      {{if z_found.data && z_found.data.length}}
      <div class="comboDetail-pieChartTableContent1">
         <div class="pieChartSlideContent">
             <span class="proportion"><i class="glyphicon glyphicon-play iconIndicate" style="margin-right: 5px"></i>债券</span>
             <span>{{: (z_found.percent).toFixed(2)}}%</span>
             <span>{{: z_found.totalAmout/10000}}万</span>
         </div>
         {{for z_found.data}}
         <div class="indicate">
           <p>
               <span class="textIndicate proportion">{{:product_name}}</span>
               <span>{{:(itemPercent).toFixed(2)}}%</span>
               <span>{{:itemAmount/10000}}万</span>
           </p>
         </div>
         {{/for}}
      </div>
      {{/if}}
   </div>
</script>

</body>
</html>

